<template>
  <div>
    <canvas id="canvas" style="display:none;background:#fff"></canvas>
    <img :id=imgId :src=imgSrc ref="img">
  </div>
</template>
<style>
   @font-face {
      font-family: 'dongqingheiti';
      /* src: url('/static/font/Hiragino Sans GB W3.otf') */
      src: url('/static/font/Hiragino Sans GB W6.ttf')
    }
</style>

<script>
  import { rules } from './rules.js'
  export default {
    props: {
      canvasData: {}
    },
    data () {
      return {
        imgId: '',
        imgSrc: '',
        width: '',
        timeStamp: '',
        markRules: {
          'HMC052': {name: '标题'}, // 标题
          // 惠付通
          'HMC066': {header: 'hft_2_4', col: 2, name: '惠付通两模块'}, // 两模块
          'HMC065': {header: 'hft_2_4', col: 2, name: '惠付通四模块'}, // 四模块
          'HMC038': {header: 'hft_3_6', col: 3, name: '惠付通三模块'}, // 三模块
          'HMC023': {header: 'hft_3_6', col: 3, name: '惠付通六模块'}, // 六模块
          // 惠配通
          'HMC011': {header: 'hpt_0_2', col: 2, name: '惠配通两模块'}, // 两模块
          'HMC054': {header: 'hpt_2_4', col: 2, name: '惠配通四模块'}, // 四模块
          'HMC012': {header: 'hpt_0_3', col: 3, name: '惠配通三模块'}, // 三模块
          'HMC013': {header: 'hpt_3_6', col: 3, name: '惠配通六模块'}, // 六模块
          // PC
          'HMC037': {header: 'pc_2_4', col: 2, name: 'PC两模块'}, // 两模块
          'HMC02': {header: 'pc_2_4', col: 2, name: 'PC四模块'}, // 四模块
          'HMC047': {header: 'pc_3_6', col: 3, name: 'PC三模块'}, // 三模块
          'HMC03': {header: 'pc_3_6', col: 3, name: 'PC六模块'} // 六模块
        },
        colorGroup: ['#b648c0', '#eb671d', '#4495fa'],
        name: ''
      }
    },
    methods: {
      createImg (context, rule) { // 生成图片
        console.log(rule)
        for (let index = 0; index < rule.setting.img.length; index++) {
          const element = rule.setting.img[index]
          /* eslint-disable no-undef */
          element.name = element.name + this.timeStamp
          element.name = new Image()
          element.name.src = element.src + '?v=' + this.timeStamp // 背景图片  你自己本地的图片或者在线图片
          element.name.setAttribute('crossOrigin', 'Anonymous')
          console.log(element.name)
          if (element.imgTitle) {
            var titleWidth = rule.setting.title[0].text.length * 46
            console.log(rule.setting.title[0].text.length * 46, titleWidth)
            console.log(rule.width - (titleWidth / 2))
            element.name.onload = function () {
              if (element.imgTitle === 'left') {
                context.drawImage(element.name, ((rule.width / 2) - (titleWidth / 2) - element.w - 10), element.y, element.w, element.h) // 生成图片
              } else {
                context.drawImage(element.name, ((rule.width / 2) + (titleWidth / 2) + 10), element.y, element.w, element.h) // 生成图片
              }
            }
          } else {
            element.name.onload = function () {
              context.drawImage(element.name, element.x, element.y, element.w, element.h) // 生成图片
            }
          }
        }
        /* eslint-enable no-undef */
      },
      async createTitle (context, rule, data, canvas) { // 生成标题
        console.log(data)
        var con = ''
        var cH = 0
        for (let i = 0; i < rule.setting.title.length; i++) { // 循环title
          var element = rule.setting.title[i]
          console.log(element)
          if (i > 0) { // 副本标题
            if (element.text.indexOf('|') !== -1) { // 是否存在多个副标题
              var v = element.text.split('|')
              var h = element.y
              // console.log(v)
              for (let j = 0; j < v.length; j++) {
                const e = v[j]
                // console.log(e)
                if (rule.setting.context) {
                  con = await this.createContext(canvas, rule, j)
                  cH = rule.setting.context[0].height
                } else {
                  con = context
                  cH = element.font.split('px')[0]
                  console.log(Number(cH) + element.lineHeight)
                }
                con.font = element.font
                con.fillStyle = element.color
                if (element.isCenter === true) {
                  con.textAlign = 'center'
                }
                con.fillText(e, element.x, h) // 循环绘制
                h += (Number(cH) + element.lineHeight) * 1 // 字体的高度
              }
            } else {
              if (rule.setting.context) {
                con = await this.createContext(canvas, rule, 0)
              } else {
                con = context
              }
              con.font = element.font
              con.fillStyle = element.color
              if (element.isCenter === true) {
                con.textAlign = 'center'
              }
              con.fillText(element.text, element.x, element.y) // 循环绘制
            }
          } else { // 主标题
            con = context
            console.log('aaa')
            console.log(element)
            console.log(con)
            con.font = element.font
            con.fillStyle = element.color
            if (element.isCenter === true) {
              con.textAlign = 'center'
            }
            con.fillText(element.text, element.x, element.y) // 循环绘制
          }
        }
      },
      createLine (context, rule) { // 生成线条
        for (let index = 0; index < rule.setting.line.length; index++) {
          const element = rule.setting.line[index]
          context.strokeStyle = element.color
          context.lineWidth = element.lineWidth
          context.moveTo(element.bx, element.by)
          context.lineTo(element.sx, element.sy)
          context.stroke()
          console.log(context)
          console.log(rule)
        }
      },
      createContext (canvas, rule, i) { // 生成区域
        console.log(rule)
        var t = ''
        var element = rule.setting.context[0]
        t = 'context' + new Date().getTime()
        t = canvas.getContext('2d')
        console.log(i)
        console.log(element.y + element.lineHeight * (i + 1))
        t.fillStyle = element.color
        t.fillRect(element.x, element.y + (element.lineHeight + element.height) * i, element.width, element.height)
        return t
      },
      async drawAndShareImage (rule, data) {
        var self = this
        this.imgId = rule.id + this.timeStamp
        this.width = rule.width
        var canvas = document.createElement('canvas') // 生成画布
        canvas.width = rule.width
        canvas.height = rule.height
        var context = canvas.getContext('2d')
        context.fillStyle = rule.bColor
        context.fillRect(0, 0, canvas.width, canvas.height)
        // context.fill()
        for (const key in rule.setting) {
          console.log(key)
          switch (key) {
            case 'img':
              this.createImg(context, rule)
              break
            case 'title':
              console.log('aaaa')
              console.log(!rule.setting.context)
              setTimeout(() => {
                self.createTitle(context, rule, data, canvas)
              }, 500)
              break
            case 'line':
              setTimeout(() => {
                self.createLine(context, rule)
              }, 500)
              break
            default:
              break
          }
        }
        setTimeout(() => {
          canvas.pixel = '#fff'
          var base64 = canvas.toDataURL('image/jpeg', 1)  // "image/png" 这里注意一下
          self.imgSrc = base64
        }, 1000)
      },
      matchRules (data) { // 匹配规则
        console.log(data)
        console.log(this.rules)
        if (data.image) {
          var self = this
          this.imgSrc = data.image
          this.imgId = data.imgId
          setTimeout(() => {
            console.log(document.getElementById('imgId'))
            console.log(document.getElementById('imgId').offsetWidth)
            self.width = document.getElementById('imgId').offsetWidth
          }, 0)
        } else {
          this.timeStamp = new Date().getTime()
          if (data.mark !== 'HMC052') {
            // console.log(this.markRules[data.mark].header)
            console.log(this.rules[this.markRules[data.mark].header + '_pp'])
            console.log(this.rules[this.markRules[data.mark].header + '_sp'])
            this.name = this.markRules[data.mark].name
            if (data.modelType === 1) {
              this.rules[this.markRules[data.mark].header + '_pp'].setting.img[0].src = data.img
              if (this.rules[this.markRules[data.mark].header + '_pp'].setting.img[1]) {
                if (this.markRules[data.mark].col === 2) {
                  this.rules[this.markRules[data.mark].header + '_pp'].setting.img[1].src = '/static/createImg/hft_2_4_' + Number(data.index + 1) % this.markRules[data.mark].col + '_pp.jpg'
                } else {
                  this.rules[this.markRules[data.mark].header + '_pp'].setting.img[1].src = '/static/createImg/hft_3_6_' + Number(data.index + 1) % this.markRules[data.mark].col + '_pp.jpg'
                }
              }
              this.rules[this.markRules[data.mark].header + '_pp'].setting.title[0].text = data.title[0]
              this.rules[this.markRules[data.mark].header + '_pp'].setting.title[1].text = data.title[1]
              this.drawAndShareImage(this.rules[this.markRules[data.mark].header + '_pp'], data)
              console.log(this.rules[this.markRules[data.mark].header + '_pp'])
            } else {
              if (this.markRules[data.mark].name.indexOf('惠配通') === -1) {
                console.log('aaaa')
                this.rules[this.markRules[data.mark].header + '_sp'].setting.title[0].color = this.colorGroup[Number(data.index + 1) % this.markRules[data.mark].col]
                if (this.rules[this.markRules[data.mark].header + '_sp'].setting.context) {
                  console.log('aaaa')
                  this.rules[this.markRules[data.mark].header + '_sp'].setting.context[0].color = this.colorGroup[Number(data.index + 1) % this.markRules[data.mark].col]
                }
              }
              this.rules[this.markRules[data.mark].header + '_sp'].setting.title[0].text = data.title[0]
              this.rules[this.markRules[data.mark].header + '_sp'].setting.title[1].text = data.title[1]
              this.rules[this.markRules[data.mark].header + '_sp'].setting.img[0].src = data.img
              this.drawAndShareImage(this.rules[this.markRules[data.mark].header + '_sp'], data)
              console.log(this.rules[this.markRules[data.mark].header + '_sp'])
            }
          } else {
            this.name = '标题'
            if (data.titleType === 1) {
              this.rules.hpt_bt_csz.setting.title[0].text = data.title1[0]
              // this.rules.hpt_bt_csz.setting.title[0].font = 'bold 46px dongqingheiti'
              this.drawAndShareImage(this.rules.hpt_bt_csz, data)
            } else {
              this.rules.hpt_bt_pppl.setting.title[0].text = data.title1[0]
              // this.rules.hpt_bt_pppl.setting.title[0].font = 'bold 46px dongqingheiti'
              if (data.modelType === 1) {
                this.rules.hpt_bt_pppl.setting.img[0].src = '/static/createImg/hpt_bt_pppl_pp_left.jpg'
                this.rules.hpt_bt_pppl.setting.img[1].src = '/static/createImg/hpt_bt_pppl_pp_right.jpg'
              } else {
                this.rules.hpt_bt_pppl.setting.img[0].src = '/static/createImg/hpt_bt_pppl_sp_left.jpg'
                this.rules.hpt_bt_pppl.setting.img[1].src = '/static/createImg/hpt_bt_pppl_sp_right.jpg'
              }
              this.drawAndShareImage(this.rules.hpt_bt_pppl, data)
            }
          }
        }
      }
    },
    created () {
      // console.log(rules)
      this.rules = rules
    }
  }
</script>
